<style lang="less">
@import "../../../styles/table-common.less";
</style>
<template>
<div class="search">
    <Card>
        <Row class="operation">
            <Button @click="add" type="primary" icon="md-add">新窗口中添加</Button>
            <Button @click="delAll" icon="md-trash">批量删除</Button>
            <Button @click="getDataList" icon="md-refresh">刷新</Button>
            <Button type="dashed" @click="openTip=!openTip">{{openTip ? "关闭提示" : "开启提示"}}</Button>
        </Row>
        <Row v-show="openTip">
            <Alert show-icon>
                已选择
                <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
        </Row>
        <Row>
            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
        </Row>
        <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
    </Card>
</div>
</template>

<script>
export default {
    name: "new-window",
    data() {
        return {
            openTip: true, // 显示提示
            loading: true, // 表单加载状态
            searchForm: {
                // 搜索框对应data对象
                pageNumber: 1, // 当前页数
                pageSize: 10, // 页面大小
                sort: "createTime", // 默认排序字段
                order: "desc" // 默认排序方式
            },
            selectList: [], // 多选数据
            selectCount: 0, // 多选计数
            columns: [
                // 表头
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    type: "index",
                    width: 60,
                    align: "center"
                },
                {
                    title: "名称",
                    key: "name",
                    sortable: true
                },
                {
                    title: "创建时间",
                    key: "createTime",
                    sortable: true,
                    sortType: "desc"
                },
                {
                    title: "更新时间",
                    key: "updateTime",
                    sortable: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    width: 250,
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button", {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                        icon: "ios-create-outline"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row);
                                        }
                                    }
                                },
                                "新窗口中编辑"
                            ),
                            h(
                                "Button", {
                                    props: {
                                        type: "error",
                                        size: "small",
                                        icon: "md-trash"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row);
                                        }
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }
            ],
            data: [], // 表单数据
            total: 0 // 表单数据总数
        };
    },
    methods: {
        init() {
            this.getDataList();
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == "normal") {
                this.searchForm.order = "";
            }
            this.getDataList();
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changeSelect(e) {
            this.selectList = e;
            this.selectCount = e.length;
        },
        getDataList() {
            this.loading = true;
            // 请求后端获取表单数据 请自行修改接口
            // this.getRequest("请求路径", this.searchForm).then(res => {
            //   this.loading = false;
            //   if (res.success) {
            //     this.data = res.result.content;
            //     this.total = res.result.totalElements;
            //   }
            // });
            // 以下为模拟数据
            this.data = [{
                    id: "1",
                    name: "XBoot(新窗口提交自动关闭后可返回该页面)",
                    createTime: "2020-12-13 00:08:00",
                    updateTime: "2020-12-13 00:08:00"
                },
                {
                    id: "2",
                    name: "周伟(新窗口提交自动关闭后可返回该页面)",
                    createTime: "2020-12-13 00:08:00",
                    updateTime: "2020-12-13 00:08:00"
                }
            ];
            this.total = this.data.length;
            this.loading = false;
        },
        add() {
            // 记录返回路由
            let query = {
                backRoute: this.$route.name
            };
            this.$router.push({
                // 该路由已在/router/router.js中定义好
                name: "add",
                query: query
            });
        },
        edit(v) {
            // 记录返回路由
            let query = {
                id: v.id,
                backRoute: this.$route.name
            };
            this.$router.push({
                // 该路由已在/router/router.js中定义好 携带id参数
                name: "edit",
                query: query
            });
        },
        remove(v) {
            this.$Modal.confirm({
                title: "确认删除",
                // 记得确认修改此处
                content: "您确认要删除 " + v.name + " ?",
                loading: true,
                onOk: () => {
                    // 删除
                    // this.deleteRequest("请求地址，如/deleteByIds/" + v.id).then(res => {
                    //   this.$Modal.remove();
                    //   if (res.success) {
                    //     this.$Message.success("操作成功");
                    //     this.getDataList();
                    //   }
                    // });
                    // 模拟请求成功
                    this.$Message.success("操作成功");
                    this.$Modal.remove();
                    this.getDataList();
                }
            });
        },
        delAll() {
            if (this.selectCount <= 0) {
                this.$Message.warning("您还未选择要删除的数据");
                return;
            }
            this.$Modal.confirm({
                title: "确认删除",
                content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                loading: true,
                onOk: () => {
                    let ids = "";
                    this.selectList.forEach(function (e) {
                        ids += e.id + ",";
                    });
                    ids = ids.substring(0, ids.length - 1);
                    // 批量删除
                    // this.deleteRequest("请求地址，如/deleteByIds/" + ids).then(res => {
                    //   this.$Modal.remove();
                    //   if (res.success) {
                    //     this.$Message.success("操作成功");
                    //     this.clearSelectAll();
                    //     this.getDataList();
                    //   }
                    // });
                    // 模拟请求成功
                    this.$Message.success("操作成功");
                    this.$Modal.remove();
                    this.clearSelectAll();
                    this.getDataList();
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
